<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
    <title>国际化</title>
  </head>
  <body>
    <div id="app">
      <p>{{ $t('message.hello') }}</p>
      <div>
        <button @click="toggleChinese">切换成中文</button>
        <button @click="toggleEnglish">切换成英语</button>
      </div>
    </div>
  </body>

  <script>
    // Ready translated locale messages
    const messages = {
      en: {
        message: {
          hello: 'hello world'
        }
      },
      ja: {
        message: {
          hello: 'こんにちは、世界'
        }
      },
      cn: {
        message: {
          hello: '你好 世界'
        }
      }
    }

    // Create VueI18n instance with options
    const i18n = new VueI18n({
      locale: 'ja', // set locale
      messages // set locale messages
    })

    // Create a Vue instance with `i18n` option
    new Vue({
      i18n,
      methods: {
        toggleChinese() {
          console.log('---我要切换成中文---')
          i18n.locale = 'cn'
        },
        toggleEnglish() {
          console.log('---i am toggle to English---')
          i18n.locale = 'en'
        }
      }
    }).$mount('#app')
  </script>
</html>
